<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .block {
                height: 5px;
                width: 5px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-for="(item,index) in map" style="display: flex">
                <div
                    v-for="(cell,index1) in item"
                    class="block"
                    :style="{
        backgroundColor:color[cell]
        }"
                    :title="'x: '+index1+', y: '+index"
                ></div>
            </div>
        </div>
    </body>
    <script type="module">
        import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.min.js";
        import {
            MapGenerator,
            renderUsefulWall,
            renderGround,
        } from "../dist/index.js";
        let randomColor = () => {
            return (
                "#" +
                [...Array(3).keys()]
                    .map((i) => {
                        const tag = Math.round(Math.random() * 255).toString(
                            16
                        );
                        return tag.length === 1 ? "0" + tag : tag;
                    })
                    .join("")
            );
        };
        new Vue({
            el: "#app",
            data() {
                return {
                    map: [[]],
                    color: ["white", "black", "red", "blue", "purple"],
                };
            },
            async mounted() {
                console.time("生成地图用时");

                const _map = new MapGenerator({
                    width: 100,
                    height: 100,

                    minRoomSize: 200,
                    smoothTime: 5,
                    density: 0.4,
                    // seed: "0.9211050884305996",
                });
                _map.buildMap().render(
                    renderUsefulWall(
                        (map, x, y) => {
                            // 这是边界区域
                            _map.afterRender(() => map.set(x, y, 3));
                        },
                        (map, x, y) => {
                            // 这是不需要进行渲染的区域
                            _map.afterRender(() => map.set(x, y, 4));
                        }
                    ),
                    renderGround((map, x, y) => {
                        _map.afterRender(() => map.set(x, y, 1));
                    }),
                    (map) => {
                        _map.rooms.forEach((room) => {
                            const c = this.color.push(randomColor());
                            room.tiles.forEach((i) => {
                                map.set(i.tileX, i.tileY, c - 1);
                            });
                        });
                    }
                );

                console.timeEnd("生成地图用时");
                console.log(_map.rooms);

                //console.log(this.map);

                // Test 工作

                // 验证是否所有点连接成功
                //  const voids = [];
                //  map.map.$forEach((value, x, y) => {
                //      if (value !== 1 && value !== 3)
                //          voids.push([x, y].join(","));
                //  });
                //  const col = [];
                //  const getAround = (x, y) =>
                //      [
                //          [x - 1, y],
                //          [x + 1, y],
                //          [x, y + 1],
                //          [x, y - 1],
                //      ].map((i) => i.join(","));
                //  const founded = (input) => {
                //      col.push(input);
                //      const around = getAround(
                //          ...input.split(",").map((i) => parseInt(i))
                //      )
                //          .filter((i) => {
                //              return !col.includes(i) && voids.includes(i);
                //          })
                //          .forEach((i) => {
                //              founded(i);
                //          });
                //  };
                //  founded(voids[100]);
                //  console.log(
                //      "地图是否全通",
                //      new Set(col).size === new Set(voids).size
                //  );

                this.map = _map.map;
            },
        });
    </script>
</html>
